<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中环创联移动充电桩服务端</title>
</head>
<body>
    <img src="/static/img/logo.jpg" alt="公司Logo" class="logo" style="width: 30%; height: 50px;">
    <div class="main">

        <div class="title" onclick="ResetRobot()">点击重设</div>

        <div class="display" id="display">
            <div class="image-container" id="map"></div>
        </div>
    </div>
    <style>
         @media (max-width: 600px) {
            body {
                background: linear-gradient(to right, #00ff00, #03fcb5);
            }
            .logo {
                width: 90%; /* 在小屏幕上使用更大的比例 */
                height: auto; /* 保持图片的纵横比 */
            }
            .main {
                width: 96%;
                height: auto;
                margin: 10px 2% 0 2%;
                border-radius: 10px;
            }
            .title {
                font-size: 24px; /* 在小屏幕上减小字体大小 */
                width: 94%;
                margin: 10px 3% 0 3%;
                border-radius: 10px;
            }
            .display {
                width: 94%;
                height: 300px; /* 在小屏幕上减小高度 */
                margin: 10px 3% 0 3%;
                align-items: center; 
                border-radius: 10px;
            }
            .robot-model {
                width: 15px; /* 在小屏幕上减小模型大小 */
                height: 15px;
                border-radius: 7%;
            }
        }
        body {
          background: linear-gradient(
            to right, 
            #00ff00, 
            #03fcb5); /* 从左到右的绿色渐变 */
        }
        button{
            border-radius: 20px;/*圆角效果*/
        }
        .main{
            width:98%;/* 自适应网页 */
            height:600px;/*高度不能百分比缩放*/
            background-color: rgb(249, 248, 244);
            border-radius: 20px;/*圆角效果*/
            margin-top: 20px;/*外边距*/
            margin-left: 1%;
            padding-left: 0;/*内边距*/
            padding-top: 10px;
            box-sizing: border-box;
        }
        .title{
            text-align: center;
            font-size: 30px;
            background: linear-gradient(
            to left, 
            #048ef7, 
            #03fcb5); /* 从左到右的渐变 */
            width:96%;
            margin-left: 2%;
            border-radius: 20px;/*圆角效果*/
            box-sizing: border-box;
        }
        .display{
            background-color: black;
            margin-top: 10px;/*外边距*/
            margin-left: 2%;
            width:94%;
            height: 450px;
            border-radius: 20px;/*圆角效果*/
            display: flex;
            justify-content: center;
            overflow-x: scroll; /* 允许水平滚动 */
            overflow-y: scroll; 
        }
        .robot-model {
            width: 20px; /* 宽度 */
            height: 20px; /* 高度为宽度 */
            background-color: rgba(255, 255, 255, 0); /* 背景颜色 */
            color: rgb(186, 145, 10); /* 字体颜色为黄色 */
            font-weight: bold; /* 字体加粗 */
            text-align: center; /* 文本水平居中 */
            vertical-align: middle; /* 内容垂直居中 */
            border: 5px solid transparent; /* 初始边框为透明 */
            border-image: linear-gradient(to right, #ff9900, #ffcc00) 1; /* 渐变色边框 */
            border-image-slice: 1; /* 边框宽度 */
            border-radius: 10%; /* 保持圆形 */
        }
        .image-container {
            background-size: contain; /* 图片将保持其原始比例并尽可能缩放以适应div */
            background-position: center; /* 图片将居中显示 */
            background-repeat: no-repeat; /* 图片不会重复 */
            position: relative;
        }


    </style>
    <script>

        // 获取地图，以及停车点位置
        var mapName = "{{ map }}";

        //10ms定时器
        var timer=100;

        //发位置
        function ResetRobot(){
            var titleElement = document.querySelector('.title');
            fetch('/reset-robot',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({'data':0})
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        }

        function DisplayMap() {
            
            var mapDiv = document.getElementById('map');

            // 设置背景图片的路径
            mapDiv.style.backgroundImage = 'url("/static/img/' + mapName + '.jpg")';

            // 获取图片的宽度和高度
            var img = new Image();
            img.src = '/static/img/' + mapName + '.jpg'
            img.onload = function() {
                // 设置长宽
                mapDiv.style.width = img.width+'px';
                mapDiv.style.height = img.height+'px';
            };
        }


        function GetRobotList() {
            fetch('/datajson')
                // 尝试获取请求
                .then(response => response.json())
                .then(RobotList => {
                    // 获取每个机器人
                    RobotList.forEach(function(RobotData) {
                        // 机器人在线且在当前地图
                        if(mapName===RobotData['map'] && RobotData['timeout']!==0)
                        {
                            // 更新机器人模型
                            if(!document.getElementById(RobotData['id'])){
                                var RobotModel = document.createElement('div');
                                RobotModel.id=RobotData['id'];
                                RobotModel.textContent =RobotData['id'];
                                RobotModel.className = 'robot-model'; // 应用CSS类
                                var MapElement=document.getElementById('map');
                                MapElement.appendChild(RobotModel);
                            }
                            // 更新机器人位置
                            else
                            {
                                var RobotModel = document.getElementById(RobotData['id']);
                                var x=RobotData['x'];
                                var y=RobotData['y'];
                                // 设置机器人模型的位置
                                RobotModel.style.position = 'absolute'; // 确保可以绝对定位
                                RobotModel.style.left = (x-10) + 'px'; // 设置模型左边缘的位置
                                RobotModel.style.top = (y-10) + 'px'; // 设置模型顶部的位置
                                
                            }
                        }
                        else
                        {
                            var RobotModel = document.getElementById(RobotData['id']);
                            // 如果元素存在，则从其父元素中删除
                            if (RobotModel) {
                                RobotModel.parentNode.removeChild(RobotModel);
                            }
                        }
                            

                        });
                   
                })
                .catch(error => console.error('Error fetching robot list:', error));
        }

        // 每隔一段时间刷新数据
        setInterval(GetRobotList, 500);

        //只执行一次
        document.addEventListener('DOMContentLoaded', GetRobotList);
        DisplayMap()
    </script>

</body>
</html>